import { getCategory } from "@/api/category";
import React, { useEffect, useState } from "react";
import { Badge, List, SearchBar, SideBar, Image } from "antd-mobile";
import Style from "./Category.module.scss";
import { useNavigate } from "react-router-dom";

type Props = {};
type categoryType = {
  id: number;
  bannerList: string;
  bannerUrl: string;
  categoryType: number;
  extra: string;
  frontDesc: string;
  frontName: string;
  frontNameIcon: string;
  iconUrl: string;
  imgUrl: string;
  level: string;
  name: string;
  showIndex: number;
  subCateList: [];
  superCategoryId: number;
  type: number;
  wapBannerUrl: string;
  wapExpandPicTargetUrl: string;
  key: string;
  idx: number;
  title: string;
};

const CategoryView = (props: Props) => {


  //获取分类图片
  const [demoSrc, setDemoSrc] = useState<string>();

  const [listimg, setListimg] = useState<string>();
  
  //获取列表头
  const [header, setHeader] = useState([]);

  const [categoryid, setCategoryid] = useState<any>(11);
  // 获取路由导航函数
  var navigate = useNavigate();

  const [catearr, setCatearr] = useState([]);

  //获取列表数据
  const [list2, setList2] = useState([]);
  //  发送请求,请求数据
  useEffect(() => {
    getCategory(categoryid).then((res:any) => {
      setCatearr(res.data.data.categoryL1List);
      setDemoSrc(res.data.data.currentCategory.bannerList[0].picUrl);
      setHeader(res.data.data.categoryL2List[0].name);
      setList2(res.data.data.categoryL2List);
      setListimg(res.data.data.categoryL2List[0].bannerUrl);
      // console.log(res.data.data.categoryL1List);
    });
  }, []);

  const categoryidArr: any = catearr.map((val: any) => {
    return {
      id: val.id,
      name: val.name,
    };
  });
  const obj = categoryidArr.map((val: any) => {
    return {
      key: val.id,
      title: val.name,
    };
  });
  console.log(obj);

  // 数据源
  const [dataSource, setDataSource] = useState<Array<categoryType>>([]);
  const tabs = obj;
  
  return (
    <div className={Style.wrapper}>
      <div className={Style.top}>
        <SearchBar placeholder="网易严选" />
      </div>
      <div className={Style.bot}>
        <SideBar style={{ width: "300px" }} className={Style.left}>
          {tabs.map((item: any) => (
            <SideBar.Item
              className={Style.list}
              key={item.key}
              title={
                <div
                  key={item.index}
                  onClick={(e) => {
                    const newid = item.key;
                    getCategory(newid).then((res:any) => {
                      setCatearr(res.data.data.categoryL1List);
                      setDemoSrc(
                        res.data.data.currentCategory.bannerList[0].picUrl
                      );
                      setHeader(res.data.data.categoryL2List[0].name);
                      setList2(res.data.data.categoryL2List);
                      setListimg(res.data.data.categoryL2List[0].bannerUrl);
                    });
                    console.log(item.key);
                  }}
                >
                  {item.title}
                </div>
              }
            />
          ))}
        </SideBar>
        <div className={Style.right}>
          <Image style={{ height: "100px" }} src={demoSrc} />
          <List className={Style.header} header={header}>
            <List.Item
              className={Style.list2}
              style={{
                display: "flex",
                justifyContent: "space-between",
                flexWrap: "wrap",
              }}
            >
              <div
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  flexWrap: "wrap",
                  overflow: "auto",
                  height: "600px",
                }}
              >
                {list2.map((val: any,key) => (
                  <div className={Style.listdiv} id={val.superCategoryId} key={key}>
                    <img
                      className={Style.listimg}
                      src={val.wapBannerUrl}
                      id={val.superCategoryId + "" + val.id}
                      onClick={(e) => {
                        console.log(e);
                        navigate(
                          "/categorylist/" + val.superCategoryId + "" + val.id
                        );
                      }}
                    />
                    <p className={Style.p}>{val.name}</p>
                  </div>
                ))}
              </div>
            </List.Item>
          </List>
        </div>
      </div>
    </div>
  );
};

export default CategoryView;

